<template>
  <div id="app">
    <!-- <hello></hello> -->
    <div class="header w1200">
        <div class="logo">多吃水果</div>
        <div class="menu">
          <el-menu :default-active="activeIndex" router class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="/home">核心数据</el-menu-item>
            <el-menu-item index="/about">订单管理</el-menu-item>
            <el-menu-item index="3">发货管理</el-menu-item>
          </el-menu>
        </div>
    </div>
    <div class="main w1200">
<!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// import Hello from './components/Hello'

export default {
  name: 'app',
  data () {
    return {
      activeIndex: '1'
    }
  },
  created: function(){
    var cur_path = this.$route.path; //获取当前路由
    this.activeIndex = cur_path;

  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    }
  },
  components: {
    // Hello
  }
}
</script>

<style>
body{
  margin: 0;
  padding: 0;
  background-color: #fff;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  color: #2c3e50;
}
a{
  text-decoration: none;
  display: block；
}
.main{
    height: 400px;
    margin-left: 180px;
    margin-right: 25px;
}
.w1200 {
  width: 1200px;
  margin: auto;
}
.header {
  height: 50px;
  display: flex;
  flex-direction: row;
}
.header .logo {
  display: flex;
  align-items: center;
  padding-right: 40px;
}
.header .menu {
  
}
.el-menu--horizontal>.el-menu-item {
  height: 50px;
  line-height: 50px;
}
.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 2px solid #bdbdbd;
  color: #303133;
}

</style>
